        
        

        body>.container{
            position: relative;
            z-index: 2;
        }
        main .space{
            padding-top: 70px;
            padding-bottom: 120px;
        }
        main .space .title>.line{
            width: 40px;
            height: 2px;
            background: #000;
            display: block;
            margin-bottom: 40px;
        }
        main .space.ready .title .line,
        main .space.ready .title .txt{
            transition: all ease 1s .5s;
        }
        main .space.ready .title .line{
            transform: translateX(20px);
            opacity: 0;
        }
        main .space.ready .title .txt{
            transform: translateY(20px);
            opacity: 0;
        }
        main .space.frozen .title .line{
            transform: translateX(0px);
            opacity: 1;
        }
        main .space.frozen .title .txt{
            transform: translateY(0px);
            opacity: 1;
        }
        main .space.ready .title .txt p{
            opacity: 0;
            transition: all ease .5s 1.5s;
        }
        main .space.ready.frozen .title .txt p{
            opacity: 1;
        }
        main .space .title .txt p{
            float: left;
        }
        main .space .title .txt p span:first-child{
            height: 36px;
            display: block;
            line-height: 36px;
        }
        main .space .title .txt p span:last-child{
            height: 30px;
            margin-top: 30px;
            font-weight: bold;
        }
        main .space .title .txt p:first-child{
            padding-right: 40px;
        }
        main .space .title .txt p:first-child span:first-child{
            font-size: 36px;
        }
        main .space .title .txt p:first-child span:last-child{
            font-size: 30px;
        }
        main .space .title .txt p:last-child span{
            font-size: 24px;
            padding-left: 40px;
        }
        main .space .title .txt .verticalLine{
            width: 2px;
            background: #000;
            display: block;
        }
        main .space .nav{
            overflow: hidden;
        }
        main .space .nav li{
            margin-top: 70px;
            width: 21%;
            float: left;
        }
        main .space .nav li span{
            display: inline-flex;
            cursor: pointer;
            transition: all ease .5s;
        }
        
        main .space .nav li span:hover .line{
            transform: rotate(30deg);
        }
        main .space .nav li .line{
            width: 40px;
            height: 1px;
            background: #000;
            display: block;
            margin-right: 20px;
            transition: all ease .5s;
        }
        main .space .nav li.active span{
            color:#d93e32;
        }
        main .space .nav li.active .line{
            background: #d93e32;
        }
        main .space .contn{
            margin-top: 100px;
            overflow: hidden;
        }
        main .space .contn .box{
            position: relative;
            overflow: hidden;
            width: 400%;
            margin-bottom: 180px;
        }
        main .space .contn.ready .box .block{
            position: absolute;
            height: 50%;
            width:12.5%;
            background:#fff;
            z-index: 2;
        }
        main .space .contn.frozen .box .block{
            animation: blockMove ease 2s forwards;
            animation-delay: .5s;
        }
        @keyframes blockMove{
            0%{top:0;left:0px}
            25%{top: 0px;left: 12.5%;}
            50%{top:50%;left: 12.5%;};
            75%{top:50%;left: 0px;}
            100%{top: 50%;left: -12.5%;}
        }
        main .space .contn .box .page{
            width: 25%;
            float: left;
            position: relative;
            z-index:1;
        }
        
        main .space .contn .box .page ul li{
            width: 50%;
            float: left;
            opacity: 0;
            transition: ease .5s width;
        }
     
        main .space .contn.ready .box .page ul li:first-child{
            opacity: 1;
        }
        main .space .contn.frozen .box .page ul li:nth-child(2){
            animation: secondAppear .1s ease forwards;
            animation-delay: 1s;
        }
        @keyframes secondAppear{
            from{opacity: 0;}to{opacity: 1;}
        }
        main .space .contn.frozen .box .page ul li:nth-child(4){
            
            animation: thirdAppear .1s ease forwards;
            animation-delay: 1.5s;
        }
        @keyframes thirdAppear{
            from{opacity: 0;}to{opacity: 1;}
        }
        main .space .contn.frozen .box .page ul li:nth-child(3){
            animation: lastAppear .1s ease forwards;
            animation-delay: 1.8s;
        }
        @keyframes lastAppear{
            from{opacity: 0;}to{opacity: 1;}
        }
      
        
        main .space .contn .box .page ul li .item{
            padding-bottom: calc(100% + 50px);
            position: relative;
            opacity: 0;
            pointer-events:none;
            transition: all ease 1s;
            display: block;
        }
        main .space .contn .box .page:nth-child(odd) ul li:nth-child(2) .item,
        main .space .contn .box .page:nth-child(odd) ul li:nth-child(3) .item{
            transition-delay: .2s;
        }
        main .space .contn .box .page:nth-child(even) ul li:nth-child(1) .item,
        main .space .contn .box .page:nth-child(even) ul li:nth-child(4) .item{
            transition-delay: .2s;
        }
        main .space .contn .box .page.current ul li .item{
            opacity:1;
            pointer-events:initial;
            cursor: pointer;
            display: block;
        }
        main .space .contn .box .page ul li .item>img{
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            position: absolute;
            top: 0px;
            left:0px;
        }
        main .space .contn .box .page ul li .item .tip{
            padding: 35px;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
            z-index: 2;
            color: #fff;
            opacity: 0;
            transition:all ease .5s;
        }
        main .space .contn .box .page ul li:hover .item .tip{
            opacity: 1;
        }
        main .space .contn .box .page ul li .item .tip .line{
            width: 40px;
            height: 2px;
            background: #fff;
        }
        main .space .contn .box .page ul li .item .tip h5{
            font-size:24px;
            margin-top:30px;
            margin-bottom:25px;
            min-height: 65px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
        }
        main .space .contn .box .page ul li .item .tip p{
            width: 50%;
            font-size: 14px;
            padding-right: 20px;
            min-height: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            white-space: normal;
            word-break: break-all;
        }
        main .space .contn .box .page ul li .item .tip img{
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            cursor: pointer;
            animation:rotate .5s ease forwards;
        }
        main .space .contn .box .page ul li .item .tip img:hover{
            animation-name: myRotate;
        }
        @keyframes rotate{
            form{
                transform: rotate(180deg);
            }to{
                transform:rotate(180deg);
            }
        }
        @keyframes myRotate{
            form{
                transform: rotate(0deg);
            }to{
                transform:rotate(180deg);
            }
        }

        @media (max-width:1100px){
            main .space .contn .box .page ul li .item .tip h5{
                margin-top:15px;
                margin-bottom:10px;
            }
            main .space .contn .box .page ul li .item .tip{
                padding:15px 35px;
            }
            main .space .contn .box .page ul li .item .tip img{
                width: 40px;
            }
            main .space .nav li{
                width: 34%;
            }
        }
        @media (max-width:767px){
            main .space .contn .box .page ul li{
                width: 100%;
            }
            main .space .contn .box{
                margin-bottom: 90px;
            }
            main .space{
                padding-bottom: 60px;
            }
            main .space .contn .box .page ul li .item .tip{
                padding:15px;
            }
            main .space .nav li{
                width: 51%;
                margin-top: 25px;
            }
            main .space .title .txt p:first-child span:first-child{
                font-size: 28px;
            }
            main .space .title .txt p:last-child span{
                font-size: 20px;
            }
            main .space .title .txt p:first-child span:last-child{
                font-size: 18px;
            }
            main .space .title .txt p:last-child span{
                font-size: 16px;
            }
            main .space .title .txt p:first-child{
                padding-right: 20px;
            }
            main .space .title .txt p:last-child span{
                padding-left: 20px;
            }
            main .space .title .txt p span:last-child{
                margin-top: 20px;
            }
            main .space .nav{
                margin-top: 25px;
            }
        }